<script setup>
import VideoStream from '@/components/VideoStream.vue'
import EggChart3D from '@/components/EggChart3D.vue'
import { onMounted, ref, onUnmounted } from 'vue'
import * as echarts from 'echarts'

// 动态数据 - 禽蛋检测数量
const eggCount = ref(0)

// 左右两侧图表实例
let leftChart1 = null
let leftChart2 = null
let rightChart1 = null
let rightChart2 = null

// 定时器
let countTimer = null
let chartUpdateTimer = null

onMounted(() => {
  // 初始化图表
  initCharts()
  
  // 开始计数器
  startCounting()
  
  // 定期更新图表
  chartUpdateTimer = setInterval(updateCharts, 5000)
})

onUnmounted(() => {
  // 清理定时器
  if (countTimer) clearInterval(countTimer)
  if (chartUpdateTimer) clearInterval(chartUpdateTimer)
})

// 初始化所有图表
function initCharts() {
  // 左侧图表
  const leftChartEl1 = document.getElementById('left-chart-1')
  if (leftChartEl1) {
    leftChart1 = echarts.init(leftChartEl1)
    renderLeftChart1()
  }
  
  const leftChartEl2 = document.getElementById('left-chart-2')
  if (leftChartEl2) {
    leftChart2 = echarts.init(leftChartEl2)
    renderLeftChart2()
  }
  
  // 右侧图表
  const rightChartEl1 = document.getElementById('right-chart-1')
  if (rightChartEl1) {
    rightChart1 = echarts.init(rightChartEl1)
    renderRightChart1()
  }
  
  const rightChartEl2 = document.getElementById('right-chart-2')
  if (rightChartEl2) {
    rightChart2 = echarts.init(rightChartEl2)
    renderRightChart2()
  }
}

// 开始计数
function startCounting() {
  // 初始化为一个随机数
  eggCount.value = Math.floor(Math.random() * 1000) 
  
  // 每100ms增加计数
  countTimer = setInterval(() => {
    // 自然增长函数: 每次增加1-5个蛋
    const increment = Math.floor(Math.random() * 5) + 1
    eggCount.value += increment
  }, 3000)
}

// 更新图表数据
function updateCharts() {
  renderLeftChart1()
  renderLeftChart2()
  renderRightChart1()
  renderRightChart2()
}

// 左侧第一个图表
function renderLeftChart1() {
  if (!leftChart1) return
  
  const option = {
    title: {
      text: '检测效率趋势',
      textStyle: {
        color: '#fff',
        fontSize: 18
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00'],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        show: false
      }
    },
    series: [{
      data: [
        Math.floor(Math.random() * 300) + 700,
        Math.floor(Math.random() * 300) + 700,
        Math.floor(Math.random() * 300) + 700,
        Math.floor(Math.random() * 300) + 700,
        Math.floor(Math.random() * 300) + 700,
        Math.floor(Math.random() * 300) + 700,
        Math.floor(Math.random() * 300) + 700
      ],
      type: 'line',
      smooth: true,
      itemStyle: {
        color: '#58D98C'
      },
      areaStyle: {
        color: 'rgba(88, 217, 140, 0.3)'
      }
    }]
  }
  
  leftChart1.setOption(option)
}

// 左侧第二个图表
function renderLeftChart2() {
  if (!leftChart2) return
  
  const option = {
    title: {
      text: '合格率统计',
      textStyle: {
        color: '#fff',
        fontSize: 18
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          width: 12
        },
        axisLine: {
          lineStyle: {
            width: 12,
            color: [
              [0.6, '#FF6E76'],
              [0.8, '#FFD700'],
              [1, '#58D98C']
            ]
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          distance: -12,
          length: 10,
          lineStyle: {
            width: 1,
            color: '#fff'
          }
        },
        axisLabel: {
          distance: 20,
          color: '#fff',
          fontSize: 10
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 12,
          itemStyle: {
            borderWidth: 8
          }
        },
        title: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 20,
          formatter: '{value}%',
          color: '#fff'
        },
        data: [
          {
            value: Math.floor(Math.random() * 30) + 70
          }
        ]
      }
    ]
  }
  
  leftChart2.setOption(option)
}

// 右侧第一个图表
function renderRightChart1() {
  if (!rightChart1) return
  
  const option = {
    title: {
      text: '缺陷类型分布',
      textStyle: {
        color: '#fff',
        fontSize: 18
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: Math.floor(Math.random() * 20) + 30, name: '裂纹' },
          { value: Math.floor(Math.random() * 15) + 20, name: '污渍' },
          { value: Math.floor(Math.random() * 10) + 10, name: '变形' },
          { value: Math.floor(Math.random() * 10) + 5, name: '色差' },
          { value: Math.floor(Math.random() * 5) + 1, name: '其他' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          color: '#fff'
        }
      }
    ]
  }
  
  rightChart1.setOption(option)
}

// 右侧第二个图表 - 设备运行状态
function renderRightChart2() {
  if (!rightChart2) return
  
  const option = {
    title: {
      text: '设备运行状态',
      textStyle: {
        color: '#fff',
        fontSize: 18
      },
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['传送带', '摄像头1', '摄像头2', '光源系统', '分拣器'],
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    series: [
      {
        name: '运行效率',
        type: 'bar',
        barWidth: '60%',
        data: [
          Math.floor(Math.random() * 30) + 70,
          Math.floor(Math.random() * 40) + 60,
          Math.floor(Math.random() * 40) + 60,
          Math.floor(Math.random() * 30) + 70,
          Math.floor(Math.random() * 20) + 80
        ],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#409EFF' },
            { offset: 1, color: '#58D98C' }
          ])
        },
        label: {
          show: true,
          position: 'right',
          color: '#fff',
          formatter: '{c}%'
        }
      }
    ]
  }
  
  rightChart2.setOption(option)
}
</script>

<template>
  <div class="dashboard-container">
    <div class="left-section">
      <div class="chart-box">
        <div id="left-chart-1" class="chart"></div>
      </div>
      <div class="chart-box">
        <div id="left-chart-2" class="chart"></div>
      </div>
      <div class="chart-box">
        <div class="info-card">
          <div class="info-title">系统状态</div>
          <div class="info-item">
            <span>运行状态</span>
            <span class="status success">正常运行</span>
          </div>
          <div class="info-item">
            <span>检测速度</span>
            <span>{{ Math.floor(Math.random() * 100)  }} 个/分钟</span>
          </div>
          <div class="info-item">
            <span>设备温度</span>
            <span>{{ (Math.random() * 10 + 30).toFixed(1) }} °C</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="center-section">
      <div class="video-header">
        <h3>实时检测画面</h3>
        <div class="count-display">
          <span class="label">已检测禽蛋数量:</span>
          <span class="count">{{ eggCount.toLocaleString() }}</span>
        </div>
      </div>
      <div class="video-container">
        <VideoStream />
      </div>
    </div>
    
    <div class="right-section">
      <div class="chart-box">
        <div id="right-chart-1" class="chart"></div>
      </div>
      <div class="chart-box">
        <div id="right-chart-2" class="chart"></div>
      </div>
      <div class="chart-box">
        <!-- 使用3D图表组件替换原来的排行榜 -->
        <EggChart3D />
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard-container {
  display: flex;
  height: calc(100vh - 80px);
  padding: 10px;
  box-sizing: border-box;
  background-color: #001529;
  font-family: Inter, sans-serif;
}

.left-section, .right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px;
}

.center-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  padding: 5px;
  margin: 0 10px;
}

.chart-box {
  flex: 1;
  background: linear-gradient(135deg, #1d2a44, #263b5e);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.chart {
  width: 100%;
  height: 100%;
}

.video-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40px 15px;
  background: linear-gradient(135deg, #1d2a44, #263b5e);
  border-radius: 8px;
  margin-bottom: 10px;
  font-family: Inter, sans-serif;
  color: white;
}

.video-header h3 {
  margin: 0;
  font-size: 20px;
}

.count-display {
  display: flex;
  align-items: center;
  gap: 10px;
}

.count-display .label {
  font-size: 16px;
}

.count-display .count {
  font-size: 28px;
  font-weight: bold;
  color: #58D98C;
}

.video-container {
  flex: 1;
  background: linear-gradient(135deg, #1d2a44, #263b5e);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-card, .ranking-container {
  color: white;
  height: 100%;
  box-sizing: border-box;
}

.info-title, .ranking-title {
  text-align: center;
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: bold;
  font-family: Inter, sans-serif;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}

.status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status.success {
  background: rgba(88, 217, 140, 0.2);
  color: #58D98C;
}

.ranking-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ranking-index {
  width: 20px;
  height: 20px;
  background: #409EFF;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

.ranking-item:nth-child(1) .ranking-index {
  background: #FFD700;
}

.ranking-item:nth-child(2) .ranking-index {
  background: #C0C0C0;
}

.ranking-item:nth-child(3) .ranking-index {
  background: #CD7F32;
}

.ranking-name {
  flex: 1;
  margin-left: 10px;
  font-size: 14px;
}

.ranking-count {
  font-size: 14px;
}
</style>